<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易记事本</title>
    <!-- 引入 LayUI 样式文件 -->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        .layui-nav-child {
            color: #0C0C0C;
        }

        .layui-header {
            background-color: #303030;
            color: #fff;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .layui-logo {
            font-size: 24px;
            line-height: 60px;
        }

        .layui-side {
            background-color: #333;
            width: 250px;
            flex-shrink: 0;
        }

        .layui-side-scroll {
            height: 100%;
            overflow: auto;
        }

        .layui-body {
            padding: 20px;
            background-color: #fff;
            min-height: calc(100vh - 140px);
            overflow-y: auto;
            /* 添加垂直滚动条 */
            bottom: 0 !important;
            /* 确保内容区域延伸到底部 */
        }

        .layui-footer {
            padding: 10px 20px;
            background-color: #303030;
            color: #fff;
            text-align: center;
        }

        .layui-nav-item>a {
            color: #fff;
        }

        .layui-card {
            margin-bottom: 20px;
        }

        .layui-card-body {
            background-color: #fff;
            color: #333;
            padding: 20px;
        }

        .layui-table th,
        .layui-table td {
            text-align: center;
        }

        .layui-header .layui-nav {
            margin: 0;
            display: flex;
            align-items: center;
        }

        .layui-nav-item {
            margin-left: 10px;
        }

        .layui-nav-itemed>a {
            background-color: #444;
        }

        /* 添加事件级别颜色样式 */
        .event-important {
            color: #ff4444;
        }

        .event-urgent {
            color: #ff8800;
        }

        .event-normal {
            color: #33b5e5;
        }

        /* 添加表格样式 */
        .event-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .event-table th,
        .event-table td {
            padding: 12px;
            border: 1px solid #ddd;
        }

        .event-table th {
            background-color: #f5f5f5;
        }
    </style>
</head>

<body>

    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <div class="layui-header">
            <a href="home.html">
                <div class="layui-logo">简易记事本</div>
            </a>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a>
                        <img src="resourse/旺旺.png" class="layui-nav-img"> <!-- 请修改为实际头像路径 -->
                    </a>
                    <dl class="layui-nav-child" style="color: #0C0C0C">
                        <dd><a href="home.jsp">首页</a></dd>
                        <dd><a href="info.jsp">个人信息</a></dd>
                        <dd><a href="setting.jsp">设置</a></dd>
                        <dd><a href="javascript:;" onclick="logout()" style="cursor:pointer;">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a>
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 侧边导航区域 -->
        <div class="layui-side">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;">事件分类管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" onclick="showCategoryList()">查看分类列表</a></dd>

                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">事件管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" onclick="showEventList()">查看事件列表</a></dd>

                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主体内容区域 -->
        <div class="layui-body">
            <!-- 欢迎页面 -->
            <div id="welcomePage">
                <blockquote class="layui-elem-quote layui-text">
                    欢迎使用 简易记事本
                </blockquote>
                <div class="layui-card">
                    <div class="layui-card-header">
                        欢迎回来，<span id="username">用户</span>！
                    </div>
                    <div class="layui-card-body">
                        <p>在这里，您可以进行事件分类和事件管理等操作。</p>
                        <button class="layui-btn layui-btn-primary" id="popupBtn">点击我</button>
                    </div>
                </div>
                <br><br>
            </div>

            <!-- 事件分类管理区域 -->
            <div id="categoryManagement" style="display: none;">
                <div class="layui-card">
                    <div class="layui-card-header">事件分类管理</div>
                    <div class="layui-card-body">
                        <!-- 添加分类表单 -->
                        <form class="layui-form" id="addCategoryForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" id="categoryName" required lay-verify="required"
                                        placeholder="请输入分类名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类描述</label>
                                <div class="layui-input-block">
                                    <textarea id="categoryDescription" placeholder="请输入分类描述"
                                        class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="addCategory()">添加分类</button>
                                </div>
                            </div>
                        </form>

                        <!-- 编辑分类表单 -->
                        <form class="layui-form" id="editCategoryForm" style="display: none;">
                            <input type="hidden" id="editCategoryId">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" id="editCategoryName" required lay-verify="required"
                                        placeholder="请输入分类名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类描述</label>
                                <div class="layui-input-block">
                                    <textarea id="editCategoryDescription" placeholder="请输入分类描述"
                                        class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="submitEditCategory()">保存</button>
                                    <button type="button" class="layui-btn layui-btn-primary"
                                        onclick="cancelEdit()">取消</button>
                                </div>
                            </div>
                        </form>

                        <!-- 分类列表 -->
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <th>分类名称</th>
                                    <th>描述</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="categoryTableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 事件管理区域 -->
            <div id="eventManagement" style="display: none;">
                <div class="layui-card">
                    <div class="layui-card-header">事件管理</div>
                    <div class="layui-card-body">
                        <!-- 添加事件表单 -->
                        <form class="layui-form" id="addEventForm" style="display: none;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">事件分类</label>
                                <div class="layui-input-block">
                                    <select id="eventCategory" lay-verify="required"></select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">事件标题</label>
                                <div class="layui-input-block">
                                    <input type="text" id="eventTitle" required class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">起始日期</label>
                                <div class="layui-input-block">
                                    <input type="date" id="startDate" required class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">截止日期</label>
                                <div class="layui-input-block">
                                    <input type="date" id="endDate" required class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">事件内容</label>
                                <div class="layui-input-block">
                                    <textarea id="eventContent" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">事件级别</label>
                                <div class="layui-input-block">
                                    <select id="eventLevel" lay-verify="required">
                                        <option value="重要" selected>重要</option>
                                        <option value="紧急">紧急</option>
                                        <option value="一般">一般</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">完成状态</label>
                                <div class="layui-input-block">
                                    <select id="eventStatus" lay-verify="required">
                                        <option value="未完成" selected>未完成</option>
                                        <option value="已完成">已完成</option>
                                        <option value="作废">作废</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="submitEvent()">提交</button>
                                    <button type="button" class="layui-btn layui-btn-primary"
                                        onclick="cancelAddEvent()">取消</button>
                                </div>
                            </div>
                        </form>

                        <!-- 事件列表和搜索区域 -->
                        <div id="eventListArea">
                            <!-- 搜索表单 -->
                            <form class="layui-form" id="searchForm">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">标题</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="searchTitle" placeholder="请输入事件标题"
                                                class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">分类</label>
                                        <div class="layui-input-inline">
                                            <select id="searchCategory" lay-search>
                                                <option value="">全部分类</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">级别</label>
                                        <div class="layui-input-inline">
                                            <select id="searchLevel">
                                                <option value="">全部级别</option>
                                                <option value="重要">重要</option>
                                                <option value="紧急">紧急</option>
                                                <option value="一般">一般</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-inline">
                                            <select id="searchStatus">
                                                <option value="">全部状态</option>
                                                <option value="未完成">未完成</option>
                                                <option value="已完成">已完成</option>
                                                <option value="作废">作废</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn" onclick="searchEvents()">查询</button>
                                        <button type="button" class="layui-btn layui-btn-normal"
                                            onclick="showAddEvent()">添加事件</button>
                                    </div>
                                </div>
                            </form>

                            <!-- 事件列表 -->
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th>标题</th>
                                        <th>分类</th>
                                        <th>级别</th>
                                        <th>开始日期</th>
                                        <th>结束日期</th>
                                        <th>内容</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="eventTableBody"></tbody>
                            </table>
                        </div>

                        <!-- 修改事件表单 -->
                        <form class="layui-form" id="editEventForm" style="display: none;">
                            <input type="hidden" id="editEventId">
                            <div class="layui-form-item">
                                <label class="layui-form-label">事件分类</label>
                                <div class="layui-input-block">
                                    <select id="editEventCategory" lay-verify="required"></select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">事件标题</label>
                                <div class="layui-input-block">
                                    <input type="text" id="editEventTitle" required class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">起始日期</label>
                                <div class="layui-input-block">
                                    <input type="date" id="editStartDate" required class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">截止日期</label>
                                <div class="layui-input-block">
                                    <input type="date" id="editEndDate" required class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">事件内容</label>
                                <div class="layui-input-block">
                                    <textarea id="editEventContent" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">事件级别</label>
                                <div class="layui-input-block">
                                    <select id="editEventLevel" lay-verify="required">
                                        <option value="重要">重要</option>
                                        <option value="紧急">紧急</option>
                                        <option value="一般">一般</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">完成状态</label>
                                <div class="layui-input-block">
                                    <select id="editEventStatus" lay-verify="required">
                                        <option value="未完成">未完成</option>
                                        <option value="已完成">已完成</option>
                                        <option value="作废">作废</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="submitEditEvent()">保存</button>
                                    <button type="button" class="layui-btn layui-btn-primary"
                                        onclick="cancelEditEvent()">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚区域 -->
        <div class="layui-footer">
            © 简易记事本 - ��权所有
        </div>
    </div>

    <!-- 修改脚本引用部分 -->
    <script src="layui/layui.js"></script>
    <script src="js/api.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/home.js"></script>
</body>

</html>